<template>
	<view class="shop-item">
		<slot name="select"></slot>
		<view style="flex: 1">
			<view class="row-1">
				<text class="shop-name">{{ shop.name }}</text>
				<view class="distance">
					<text class="iconfont icon-wxbdingwei"></text>
					<text>{{ shop.distance }}km</text>
				</view>
			</view>
			<view class="row-2">
				<text class="iconfont icon-dingwei"></text>
				<text class="address">{{ shop.address }}</text>
			</view>
			<slot name="phone"></slot>
		</view>
	</view>
</template>

<script>
import Selected from '@/components/selected';
export default {
	components: {
		Selected
	},
	props: {
		shop: {
			type: Object,
			required: true,
			default: {}
		}
	},
	data() {
		return {};
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;
.shop-item {
	border-top: 1rpx solid #dddddd;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	.row-1,
	.row-2 {
		color: #808080;
		font-size: 25rpx;
	}

	.row-1 {
		display: flex;
		flex-direction: row;
		padding: 15rpx 0 0 0;
		.shop-name {
			flex: 4;
			color: #323233;
			font-size: 30rpx;
		}
		.distance {
			flex: 1;
			text-align: right;
		}
	}

	.row-2 {
		padding: 10rpx 0 15rpx 0;
		.address {
			padding-left: 5rpx;
		}
	}
}
</style>
